<template>
	<view class="container">
		<view class="back">
			<image src="../../static/left.png" @click="back"></image>
		</view>
		<view class="from">
			<view class="login">LOGIN</view>
			<view class="welcome">欢迎回来!</view>
			<button v-if="!loginType" class="loginType" @click="chooseLoginType('weChat')">微信快速登录（推荐）</button>
			<button v-if="!loginType" class="loginType" @click="chooseLoginType('phone')">手机注册登录</button>
			<view class="login_content" v-if="loginType === 'phone'">
				<view class="input_item">
					<text>手机号码</text>
					<input type="number" data-key="phone" @input="valCurrent" placeholder="请输入手机号码" maxlength="11" />
				</view>
				<view class="input_item">
					<text>密码</text>
					<input type="mobile" data-key="password" @input="valCurrent" placeholder="8-18位不含特殊字符的数字、字母组合" maxlength="20" />
				</view>
			</view>
			<button class="loginType" v-if="loginType === 'weChat'">微信授权登录</button>
			<button class="loginType" v-if="loginType === 'phone'" @click="login">登录</button>
			<view class="forget" v-if="loginType === 'phone'">忘记密码?</view>
			<view class="register" v-if="loginType === 'phone'">
				<text>还没有账号?</text>
				<text @click="toRegist">马上注册</text>
			</view>
			<view v-if="isShow" class="message">{{message}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginType: '',
				logining: false,
				isShow: false,
				phone: '',
				password: '',
				message: ''
			}
		},
		methods: {
			back() {
				uni.navigateBack();
				if (this.loginType) {
					this.loginType = ''
				}
			},
			chooseLoginType(loginType) {
				this.loginType = loginType
			},
			login() {
				let that = this
				if (this.phone.length !== 11) {
					this.message = '请输入11位中国手机号'
					this.isMessage()
				} else if (this.password.length < 8) {
					this.message = '密码至少8位'
					this.isMessage()
				} else {
					uni.request({
						url: 'http://192.168.1.84:8081/m.api', //接口地址
						data: {
							'_gp': 'user',
							'_mt': 'login',
							'phone': that.phone,
							'password': that.password
						},
						method: 'GET',
						success: res => {
							if(res.data.errno != 200){
								this.message = res.data.errmsg
								this.isMessage()
							}else{
								// console.log(res.data.data)
								uni.setStorageSync('userInfo', res.data)				
								let pages = getCurrentPages();
								 let prevPage = pages[pages.length - 2]; //上一个页面
								 // prevPage.setData({})
								    uni.navigateBack()
							}
							
						}
					});
				}
			},
			isMessage() {
				this.isShow = true;
				let that = this
				setTimeout(function() {
					that.isShow = false;
				}, 1500);
			},
			valCurrent(e) {
				let key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			}
		},
		onLoad() {

		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		// background-color: #f5f5f5;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.back {
		width: 100%;
		height: 40upx;
		padding: 0 30upx;
	}

	.back image {
		width: 40upx;
		height: 40upx;
		// background-position: left top;
	}

	.from {
		width: 100%;
		position: relative;
		z-index: 90;
		padding-bottom: 40upx;
	}

	.login {
		font-size: 120upx;
		color: #F8F8F8;
		position: relative;
		left: -16upx;
	}

	.welcome {
		color: #555;
		font-size: 46upx;
		position: relative;
		left: 50upx;
		top: -90upx;
	}

	.login_content {
		padding: 0 60upx;
	}

	.input_item {
		height: 120upx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		background: #f8f6fc;
		border-radius: 4px;
		margin-bottom: 50upx;
		padding: 0 30upx;
	}

	.input_item text {
		height: 50upx;
		line-height: 56upx;
		font-size: 28upx;
	}

	.input_item input {
		height: 60upx;
		font-size: 28upx;
		width: 100%;
	}

	.loginType {
		color: #fff;
		width: 630upx;
		height: 76upx;
		font-size: 30upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: #fa436a;
		border-radius: 100px;
	}

	.forget {
		font-size: 26upx;
		text-align: center;
		margin-top: 40upx;
		color: #4399fc;
	}

	.register {
		width: 100%;
		height: 50upx;
		margin-top: 270upx;
		font-size: 26upx;
		text-align: center;
	}

	.register text:nth-child(2) {
		color: #4399fc;
		margin-left: 10upx;
	}

	.message {
		padding: 15upx 30upx;
		position: absolute;
		background-color: #565557;
		color: #fff;
		font-size: 26upx;
		border-radius: 15upx;
		text-align: center;
		top: 36%;
		left: 25%;
		z-index: 999;
	}
</style>
